<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            /* width: ; */
        }

        .img1 {
            background: url(./img/1.png)0 0;
            position: absolute;
            width: 135px;
            height: 156px;
        }

        .img2 {
            width: 65px;
            height: 102px;
            position: absolute;
            left: 138px;
            top: 40px;
            background: url(./img/4.jpg) 0px 0;
        }

        .img3 {
            width: 67px;
            height: 144px;
            position: absolute;
            left: 196px;
            top: 20px;
            background: url(./img/5.png) -2px 0px;
        }

        .img4 {
            width: 98px;
            height: 156px;
            position: absolute;
            left: 246px;
            top: -6px;
            background: url(./img/2.jpg) -0 0;
        }

        .img5 {
            position: absolute;
            width: 75px;
            height: 108px;
            background: url(./img/6.png) -0 0;
            left: 323px;
            top: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="img3"></div>
        <div class="img4"></div>
        <div class="img5"></div>

    </div>
    <script src="./jquery-3.6.0.js"></script>
    <script>
        var time
        var a = 0
        var isok = true
        function fn(item,dong,jian) {
            item.click(function () {
                console.log('aaa');
                if (isok) {
                    isok = false
                    time = setInterval(function () {
                        if (a > dong) {
                            a = a - jian
                            item.css('backgroundPosition', a)
                        } else {
                            clearInterval(time)
                            isok = true
                            a = 0
                        }
                    }, 50)
                }
            })
        }
        fn($('.img4'),-13480,98)
        fn($('.img5'),-5325,75)
        fn($('.img3'),-5226,67)


    </script>
</body>

</html>